<template>
    <div class="page" v-loading="loading">
        <el-card>
            <div class="flex">
                <div class="title mr-auto">{{ data.teacher_name }}</div>
                <el-button @click="$router.back()">返回</el-button>
            </div>
        </el-card>
        <el-card class="mt-4" shadow="never" v-for="item in data.course_journal_responses" :key="item.course_id">
            <div class="title mb-2">勋章课名称：{{ item.course_name }}</div>
            <el-table :data="item.section_journal_responses" border>
                <el-table-column label="小节名(学习状态清单)" prop="section_name"/>
                <el-table-column label="被学习次数" prop="be_learned_num"/>
                <el-table-column label="被标记学习完成次数" prop="finish_learned_num"/>
            </el-table>

            <div class="flex flex-wrap mt-4 list">
                <div class="title w-full">
                    勋章课被使用兑换码激活次数：<span class="color">总计被激活{{ item.exchange_code_num }}次</span>
                </div>
                <div class="title w-1/2" v-for="jItem in item.type_statistics" :key="jItem.id">
                    {{ jItem.name }}({{ jItem.price }})：<span class="color">总计被激活{{ jItem.num || 0 }}次</span>
                </div>
            </div>

            <div class="title mt-4 mb-2">预计总收益：{{ item.amount }}</div>
            <el-table :data="item.course_exchange_responses" border>
                <el-table-column label="日期">
                    <template slot-scope="{row}">
                        {{ row.exchange_at | formatTime }}
                    </template>
                </el-table-column>
                <el-table-column label="激活者的学员账号" prop="account"/>
                <el-table-column label="激活的兑换码" prop="code"/>
                <el-table-column label="兑换码类型" prop="type"/>
                <el-table-column label="兑换码价格" prop="price"/>
            </el-table>
        </el-card>
        <el-card v-if="!data.course_journal_responses || !data.course_journal_responses.length">
            <div class="flex items-center justify-center w-full h-40">暂无课程数据</div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            id: '',
            loading: false,
            data: {},
        };
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get(`course-teacher/course/journal/${this.id}`).then((res) => {
                this.data = res;
            }).finally(() => this.loading = false);
        },
    },
    mounted() {
        this.id = this.$route.params.id;
        if (this.$route.name === 'Teacher.Account.ActiveLog') {
            this.id = this.$store.state.my.id;
        }
        if (this.id) this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.page {
    .input-width {
        max-width: 300px;
    }
}

.list .title {
    margin-bottom: 10px;
}

.color {
    color: #4385c5;
    font-weight: bold;
}
</style>
